class ControlButtons {
  constructor(onStart, onPause, onResume, onRestart, onNextRound) {
    this.buttons = {
      start: this.createButton('开始辩论', onStart),
      pause: this.createButton('暂停', onPause),
      resume: this.createButton('继续', onResume),
      restart: this.createButton('重启', onRestart),
      next: this.createButton('下一轮', onNextRound)
    };
    // 初始状态
    this.setDisabled('pause', true);
    this.setDisabled('resume', true);
    this.setDisabled('next', true);
    this.setDisabled('restart', true);
  }

  createButton(text, onClick) {
    const button = document.createElement('button');
    button.textContent = text;
    button.classList.add('control-button');
    if (onClick) {
      button.addEventListener('click', (e) => {
        console.log(`按钮 ${text} 被点击`);
        onClick(e);
      });
      console.log(`按钮 ${text} 已绑定点击事件`);
    } else {
      console.warn(`按钮 ${text} 未绑定点击事件`);
    }
    return button;
  }

  setDisabled(buttonName, disabled) {
    if (this.buttons[buttonName]) {
      this.buttons[buttonName].disabled = disabled;
      console.log(`按钮 ${buttonName} disabled状态: ${disabled}`);
      if (disabled) {
        this.buttons[buttonName].style.opacity = '0.5';
        this.buttons[buttonName].style.pointerEvents = 'none';
      } else {
        this.buttons[buttonName].style.opacity = '1';
        this.buttons[buttonName].style.pointerEvents = 'auto';
      }
    }
  }

  render() {
    // 如果容器已存在，先移除所有事件监听器
    if (this.container) {
      Object.values(this.buttons).forEach(button => {
        button.replaceWith(button.cloneNode(true));
      });
    }

    this.container = document.createElement('div');
    this.container.classList.add('control-buttons-container');
    
    Object.values(this.buttons).forEach(button => {
      this.container.appendChild(button);
    });

    return this.container;
  }
}

export default ControlButtons;
